<template>
  <view class="border-top border-light-secondary p-3">
    <!-- 当前金币 -->
    <view class="rounded py-4 flex flex-column align-center justify-center bg-main">
      <text class="text-white font-sm mb-2">当前金币</text>
      <text class="font-weight-bold text-white" style="font-size: 60rpx;">50</text>
    </view>

    <!-- 分割线 -->
    <view class="border-top border-light-secondary my-3"></view>

    <!-- 选择充值金币标题 -->
    <view>
      <text class="font-sm text-muted">请选择充值金币</text>
    </view>

    <!-- 选择充值金币列表 -->
    <view class="flex flex-wrap" style="margin-left: -20rpx; margin-right: -20rpx;">
      <view v-for="(item,index) in list" :key="index" style="width: 33.3%;  box-sizing: border-box; " class=" p-2">
        <view v-if="item.price > 0" style="height: 130rpx;"
          class="border rounded flex flex-column align-center justify-center">
          <view class="flex align-center">
            <text class="iconfont text-warning mr-1">&#xe633;</text>
            <text class="font-md font-weight-bold">{{item.coin}}</text>
          </view>
          <text class="font text-light-muted">¥{{item.price}}</text>
        </view>
        <!-- 自定义 -->
        <view v-else style="height: 130rpx;" class="border rounded flex flex-column align-center justify-center">
          <text class="font text-light-muted">自定义</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import demoGifts from "@/demo/gifts.js";
export default {
  data() {
    return {
      // 选择充值金币的模拟数据
      list: [],
    };
  },
  mounted() {
    this.list = demoGifts;
  },
};
</script>

<style>
</style>